<template>
    <div class="container">
        <ul class="ulOne">
            <li v-for="(item,index) in arr1" :key="index">
                <div class="ulTwo" @mouseover="show(index)">
                    <img :src="item[0]">
                    <p>{{item[1]}}</p>
                    <p><span>{{item[5]}}</span>{{item[2]}}</p>
                    <p>{{item[3]}}</p>
                </div>
                <div class="ulThree" v-if="redIndex==index">
                    <div><img :src="item[4]"></div>
                    <img src="../../assets/img/mediaIn/apply/c.png">
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
require("../../assets/css/p.css")
const img1 = require("../../assets/img/mediaIn/apply/1.png")
const img2 = require("../../assets/img/mediaIn/apply/2.png")
const img3 = require("../../assets/img/mediaIn/apply/3.png")
const img4 = require("../../assets/img/mediaIn/apply/4.png")
const img5 = require("../../assets/img/mediaIn/apply/5.png")
const img6 = require("../../assets/img/mediaIn/apply/6.png")
const img7 = require("../../assets/img/mediaIn/apply/7.png")
const img8 = require("../../assets/img/mediaIn/apply/8.png")
const img9 = require("../../assets/img/mediaIn/apply/9.png")
const img10 = require("../../assets/img/mediaIn/apply/10.png")
export default {
    data(){
        return {
            arr1:[
                [img7,"最佳服务商","腾讯社交广告","年度最佳服务商",img1],
                [img2,"丰富经验","知名品牌","营销服务经验",img8,"5000+"],
                [img3,"行业方案积累","针对性提供","各行业解决方案",img4],
                [img9,"专业团队","资深专业广告运营","服务团队",img5],
                [img10,"贴心政策","提供优惠政策","助力开拓市场",img6]
            ],
            redIndex : 0,
        }
    },
    methods: {
        show(index) {
            this.redIndex = index
        },
    }
}
</script>
<style scoped>
.container{
    width:1200px;
    margin:0 auto;
    text-align: center;
    margin-top: 80px;
    overflow: hidden;
}
.ulOne{
    overflow: hidden;
    position: relative;;
    width:102%;
    padding:7px;
    
}
.ulOne p{
    font-size: 16px;
}
.ulOne>li {
    /* 216*5 1080 120 */
  width: 216px;
  float: left;
  height: 350px;
  text-align: center;
  position: relative;
  margin-left:25px;
  box-shadow: 2px 2px 17px #ededed;
}
.ulOne>li:first-child{
    margin-left: 0px;
}
.ulTwo {
  width: 100%;
  height:350px;
  text-align: center;
  /* background: url("../../assets/img/mediaIn/apply/010.png") center; */
}
.ulTwo>img{
    margin-top: 60px;
}
.ulTwo>p:nth-child(2){
    margin-top: 60px;
    font-size: 18px;
    font-weight: bold;
}
.ulTwo>p:nth-child(3){
    margin-top: 30px;
}
.ulTwo>p:nth-child(3)>span:nth-child(1),.ulThree>p:nth-child(4)>span:nth-child(1){
    font-weight: bold;
}
.ulTwo>p:nth-child(4),.ulTwo>p:nth-child(5){
    margin-top: 10px;
}
.ulThree {
  width: 100%;
  height:350px;
  /* background: url("../../assets/img/mediaIn/apply/011.png") center; */
  position: absolute;
  top: -1px;
  left: 0;
  text-align: center;
  border:1px solid red;
}
.ulThree>div>img{
    margin-top: 60px;
}
.ulThree>img:nth-child(2){
    margin-top: 30px;
}
.ulThree>p:nth-child(3){
    margin-top: 25px;
    font-size: 18px;
    font-weight: bold;
} 
.ulThree>p:nth-child(4){
    margin-top: 30px;
}
.ulThree>p:nth-child(5),.ulThree>p:nth-child(6){
    margin-top: 10px;
}
</style>


